<!DOCTYPE html>
<html lang="en">
<head>        
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />    
    <!--[if gt IE 8]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />        
    <![endif]-->                
    <title>Buttons - Leo - Premium Admin Template</title>
    <link rel="icon" type="image/ico" href="favicon.ico"/>
    
    <link href="css/stylesheets.css" rel="stylesheet" type="text/css" />
    
    <!--[if lte IE 7]>        
        <script type='text/javascript' src='js/other/lte-ie7.js'></script>
    <![endif]-->    
    
    <script type='text/javascript' src='js/jquery/jquery-2.0.0.min.js'></script>
    <script type='text/javascript' src='js/jquery/jquery-ui-1.10.3.custom.min.js'></script>
    <script type='text/javascript' src='js/jquery/jquery-migrate-1.1.1.min.js'></script>
    <script type='text/javascript' src='js/jquery/globalize.js'></script>
    
    <script type='text/javascript' src='js/bootstrap/bootstrap.min.js'></script>
    <script type='text/javascript' src='js/cookies/jquery.cookies.2.2.0.min.js'></script>
    
    <script type='text/javascript' src='js/scrollup/jquery.scrollUp.min.js'></script>
    
    <script type='text/javascript' src='js/plugins.js'></script>    
    <script type='text/javascript' src='js/actions.js'></script>
</head>
<body>    
    
    <div id="wrapper">
        
        <div id="header">
            
            <div class="wrap">
                
                <a href="index.html" class="logo"></a>
                
                <div class="buttons fl">
                    <div class="item">
                        <a href="#" class="btn btn-primary btn-small c_layout">
                            <span class="i-layout-8"></span>                            
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="btn btn-primary btn-small c_screen">
                            <span class="i-stretch"></span>                            
                        </a>
                    </div>                    
                </div>
                
                <div class="buttons">
                    <div class="item">
                        <a href="#" class="btn btn-primary btn-small">
                            <span class="i-cog"></span>
                        </a>
                        <div class="popup">
                            <div class="head">
                                <h2>Settings</h2>
                            </div>
                            <div class="content np">      
                                <div class="row-fluid">
                                    <div class="controls-row">
                                        <div class="span3">Themes:</div>
                                        <div class="span9 themes">
                                            <a href="#" class="default tip" data-theme="" title="Default"></a>
                                            <a href="#" class="dark tip" data-theme="themeDark" title="Dark"></a>
                                            <a href="#" class="simple tip" data-theme="themeSimple" title="Simple"></a>
                                            <div class="help-block">On click theme will changed and saved settings</div>
                                        </div>
                                    </div>               
                                    <div class="controls-row">
                                        <div class="span3">Backgrounds:</div>
                                        <div class="span9 backgrounds">
                                            <a href="#" class="default tip" data-theme="" title="Default"></a>                                            
                                            <a href="#" class="b_bcrosshatch" data-back="b_bcrosshatch"></a>
                                            <a href="#" class="b_crosshatch" data-back="b_crosshatch"></a>
                                            <a href="#" class="b_cube" data-back="b_cube"></a>
                                            <a href="#" class="b_dots" data-back="b_dots"></a>
                                            <a href="#" class="b_grid" data-back="b_grid"></a>
                                            <a href="#" class="b_hline" data-back="b_hline"></a>
                                            <a href="#" class="b_simple" data-back="b_simple"></a>
                                            <a href="#" class="b_vline" data-back="b_vline"></a>
                                            <div class="help-block">On click background will changed and saved settings</div>
                                        </div>
                                    </div>                                    
                                </div>
                            </div>
                            <div class="footer">
                                <div class="side fr">
                                    <button class="btn btn-primary popup-close">Close</button>
                                </div>                                
                            </div>
                        </div>                        
                    </div>
                    <div class="item">
                        <a href="#" class="btn btn-primary btn-small">
                            <span class="i-chat"></span>
                        </a>
                        <div class="popup">
                            <div class="head">
                                <h2>Messages</h2>
                            </div>
                            <div class="content npb messages minify" id="messages"></div>
                            <div class="footer">
                                <div class="side fl">
                                    <button class="btn btn-link">Show all</button>
                                </div>
                                <div class="side fr">
                                    <button class="btn btn-primary popup-close">Close</button>
                                </div>                                
                            </div>
                        </div>                        
                    </div>
                    <div class="item">                        
                        <div class="btn-group">                        
                            <a href="#" class="btn btn-primary btn-small dropdown-toggle" data-toggle="dropdown">
                                <span class="i-forward"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><span class="i-profile"></span> Profile</a></li>
                                <li><a href="#"><span class="i-tools"></span> Controls</a></li>                                
                                <li><a href="#"><span class="i-locked"></span> Lock</a></li>
                                <li><a href="#"><span class="i-forward"></span> Logout</a></li>
                            </ul> 
                        </div>
                    </div>                
                </div>
                
            </div>
            
        </div>
        
        <div id="layout">
        
            <div id="sidebar">

                <div class="user">
                    <div class="pic">
                        <img src="img/examples/users/dmitry_m.jpg"/>
                    </div>
                    <div class="info">
                        <div class="name">
                            <a href="#">John Doe</a>
                        </div>
                        <div class="buttons">
                            <a href="#"><span class="i-cog"></span> Settings</a>
                            <a href="#"><span class="i-chat"></span> Messages</a>
                            <a href="#" class="fr"><span class="i-forward"></span> Logout</a>
                        </div>
                    </div>
                </div>

                <ul class="navigation">
                    <li>
                        <a href="index.html">Dashboard</a>
                    </li>
                    <li class="openable open">
                        <a href="#">UI Elements</a>
                        <ul>
                            <li>
                                <a href="ui_elements.html">Elements</a>
                            </li>
                            <li>
                                <a href="ui_widgets.html">Widgets</a>
                            </li>
                            <li class="active">
                                <a href="ui_buttons.html">Buttons</a>
                            </li>
                            <li>
                                <a href="ui_icons.html">Icons</a>
                            </li>
                            <li>
                                <a href="ui_grid.html">Grid system</a>
                            </li>                        
                        </ul>
                    </li> 
                    <li class="openable">
                        <a href="#">Form Stuff</a>
                        <ul>
                            <li>
                                <a href="form_elements.html">Form elements</a>
                            </li>                            
                            <li>
                                <a href="form_validation.html">Form validation</a>
                            </li>                                                        
                            <li>
                                <a href="form_wizard.html">Wizard</a>
                            </li>
                            <li>
                                <a href="form_wysiwyg.html">WYSIWYG</a>
                            </li>
                            <li>
                                <a href="form_code_editor.html">Code editor</a>
                            </li>
                        </ul>                        
                    </li>                
                    <li>
                        <a href="messages.html">Messages</a>
                    </li>                                
                    <li>
                        <a href="charts.html">Charts</a>
                    </li>                                   
                    <li class="openable">                        
                        <a href="tables.html">Tables</a>
                        <ul>
                            <li>
                                <a href="tables_default.html">Default tables</a>
                            </li>
                            <li>
                                <a href="tables_sort.html">Sorting tables</a>
                            </li>
                            <li>
                                <a href="tables_edit.html">Editable tables</a>
                            </li>
                        </ul>
                    </li>              
                    <li>
                        <a href="typography.html">Typography</a>                       
                    </li>
                    <li>
                        <a href="files.html">File handling</a>                       
                    </li>                     
                    <li>
                        <a href="calendar.html">Calendar</a>                       
                    </li>                
                    <li class="openable">
                        <a href="#">Maps</a>
                        <ul>
                            <li>
                                <a href="maps_vector.html">Vector maps</a>
                            </li>
                            <li>
                                <a href="maps_google.html">Google maps</a>
                            </li>                            
                        </ul>
                    </li>                                       
                    <li class="openable">
                        <a href="#">Sample Pages</a>
                        <ul>
                            <li>
                                <a href="sample_login.html">Login</a>
                            </li>     
                            <li>
                                <a href="sample_user_edit.html">User edit</a>
                            </li>                            
                            <li>
                                <a href="sample_search.html">Search result</a>
                            </li>                 
                            <li>
                                <a href="sample_faq.html">FAQ</a>
                            </li>                            
                            <li>
                                <a href="sample_mailbox.html">Mailbox</a>
                            </li>
                            <li>
                                <a href="sample_invoice.html">Invoice</a>
                            </li>
                            <li>
                                <a href="sample_gallery.html">Gallery</a>
                            </li>                            
                            <li>
                                <a href="sample_blank.html">Blank page</a>
                            </li>         
                            <li>
                                <a href="sample_price.html">Pricing table</a>
                            </li>
                            <li>
                                <a href="sample_payment.html">Payment table</a>
                            </li>                            
                            <li class="openable">
                                <a href="#">Error pages</a>
                                <ul>
                                    <li><a href="sample_error_403.html">Error 403 forbidden</a></li>
                                    <li><a href="sample_error_404.html">Error 404 not found</a></li>
                                    <li><a href="sample_error_503.html">Error 503 service unavailable</a></li>
                                </ul>
                            </li>                            
                        </ul>
                    </li>
                    <li class="openable">
                        <a href="#" class="icon"><span class="i-star text-info"></span>Navigation samples<span class="label label-important fr">+6</span></a>
                        <ul>
                            <li><a href="#" class="icon"><span class="i-battery text-error"></span>Second level<span class="label label-info fr">$35,224</span></a></li>                            
                            <li class="openable">
                                <a href="#" class="icon"><span class="i-cart text-success"></span>Second level<span class="label label-important fr">+3</span></a>
                                <ul>
                                    <li><a href="#" class="icon"><span class="i-film"></span>Third level<span class="label label-info fr">3</span><span class="label label-success fr">2</span><span class="label fr">1</span></a></li>
                                    <li class="active"><a href="#" class="icon"><span class="i-cube text-info"></span>Active third level<span class="label label-info fr">3</span><span class="label label-info fr">2</span><span class="label label-info fr">1</span></a></li>
                                    <li><a href="#" class="icon"><span class="i-info"></span>Third level<span class="label label-warning fr">3</span><span class="label label-important fr">2</span><span class="label fr">1</span></a></li>
                                </ul>
                            </li>                            
                            <li><a href="#" class="icon"><span class="i-box text-warning"></span>Second level<span class="label label-success fr">$1989.02</span></a></li>
                        </ul>
                    </li>                     
                </ul>

            </div>

            <div id="content">  
                
                <div class="wrap">
                    
                    
                    <div class="head">
                        <div class="info">
                            <h1>UI Elements</h1>
                            <ul class="breadcrumb">
                                <li><a href="#">Dashboard</a> <span class="divider">-</span></li>
                                <li><a href="#">UI</a> <span class="divider">-</span></li>
                                <li class="active">Buttons</li>
                            </ul>
                        </div>
                        
                        <div class="search">
                            <form action="" method="post">
                                <input type="text" placeholder="search..."/>                                
                                <button type="submit"><span class="i-calendar"></span></button>
                                <button type="submit"><span class="i-magnifier"></span></button>
                            </form>
                        </div>                        
                    </div>                                                                    
                    
                    <div class="content">
                        
                        <div class="row-fluid">
                            <div class="span12">
                                
                                <div class="block">
                                    <div class="head">
                                        <h2>Buttons</h2>
                                        <div class="side fr">
                                            <button class="btn btn-primary">Button</button>
                                        </div>
                                    </div>
                                    <div class="content np">
                                        <div class="controls-row">
                                            <div class="span3">Default buttons:</div>
                                            <div class="span9">
                                                <button class="btn" type="button">Default button</button>                                 
                                                <button class="btn btn-primary" type="button">Primary button</button> 
                                                <button class="btn btn-info" type="button">Info button</button>                          
                                                <button class="btn btn-success" type="button">Success button</button> 
                                                <button class="btn btn-warning" type="button">Warning button</button>                                
                                                <button class="btn btn-danger" type="button">Danger button</button> 
                                                <button class="btn btn-inverse" type="button">Inverse button</button>                                 
                                                <button class="btn btn-link" type="button">Link button</button>                                                                                       
                                            </div>
                                        </div>                                                                                
                                        <div class="controls-row">
                                            <div class="span3">Disabled:</div>
                                            <div class="span9">                                
                                                <button class="btn disabled" type="button">Default button</button>                                
                                                <button class="btn btn-primary disabled" type="button">Primary button</button>                                 
                                            </div>
                                        </div>                        
                                        <div class="controls-row">
                                            <div class="span3">Sizes:</div>
                                            <div class="span9">                                                
                                                <button class="btn btn-large" type="button">Large button</button>
                                                <button class="btn btn-large btn-primary" type="button">Large button</button>                                
                                                <br/>                                
                                                <button class="btn" type="button">Default button</button>
                                                <button class="btn btn-primary" type="button">Default button</button>
                                                <br/>                                
                                                <button class="btn btn-small" type="button">Small button</button>
                                                <button class="btn btn-small btn-primary" type="button">Small button</button>
                                                <br/>                                
                                                <button class="btn btn-mini" type="button">Mini button</button>                                
                                                <button class="btn btn-mini btn-primary" type="button">Mini button</button>
                                                
                                                <div class="controls-row np">
                                                    <div class="span6">
                                                        <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>                                                                                                
                                                    </div>
                                                    <div class="span6">
                                                        <button class="btn btn-large btn-block" type="button">Block level button</button>                                                
                                                    </div>
                                                </div>  
                                                
                                            </div>
                                        </div>                                                         
                                    </div>
                                    <div class="footer">
                                        <div class="side fl">
                                            <button class="btn">Button</button>
                                        </div>
                                        <div class="side fr">
                                            <button class="btn btn-success">Button</button>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                        
                        <div class="row-fluid">
                            <div class="span12">
                                
                                <div class="block">
                                    <div class="head">
                                        <h2>Button groups</h2>
                                        <div class="side fr">
                                            <div class="btn-group">
                                                <button class="btn btn-primary">Refresh</button>
                                                <button class="btn btn-primary">Close</button>                                                
                                            </div>
                                        </div>
                                    </div>
                                    <div class="content np">
                                        
                                        <div class="controls-row">
                                            <div class="span3">
                                                Single buttons group:
                                            </div>
                                            <div class="span9">
                                                <div class="btn-group">
                                                    <button class="btn"><span class="icon-home"></span></button>
                                                    <button class="btn"><span class="icon-star"></span></button>
                                                    <button class="btn"><span class="icon-ok"></span></button>
                                                    <button class="btn"><span class="icon-remove"></span></button>                                                                        
                                                </div>                                                                                                
                                            </div>
                                        </div>
                                        
                                        <div class="controls-row">
                                            <div class="span3">Multiple button groups:</div>
                                            <div class="span9">
                                                <div class="btn-toolbar">
                                                    <div class="btn-group">
                                                        <button class="btn"><span class="icon-star"></span></button>
                                                        <button class="btn"><span class="icon-ok"></span></button>
                                                        <button class="btn"><span class="icon-remove"></span></button>
                                                    </div>
                                                    <div class="btn-group">
                                                        <button class="btn"><span class="icon-home"></span></button>
                                                        <button class="btn"><span class="icon-book"></span></button>
                                                        <button class="btn"><span class="icon-pencil"></span></button>                                    
                                                    </div>
                                                </div>                                                
                                            </div>
                                        </div>
                                        
                                        <div class="controls-row">
                                            <div class="span3">Vertical button groups:</div>
                                            <div class="span9">

                                                <div class="btn-group btn-group-vertical">
                                                    <button class="btn"><span class="icon-star"></span></button>
                                                    <button class="btn"><span class="icon-ok"></span></button>
                                                    <button class="btn btn-danger"><span class="icon-remove icon-white"></span></button>
                                                </div>                                                                
                                                <div class="btn-group btn-group-vertical">
                                                    <button class="btn"><span class="icon-home"></span></button>
                                                    <button class="btn"><span class="icon-book"></span></button>
                                                    <button class="btn btn-danger"><span class="icon-remove icon-white"></span></button>
                                                </div>
                                                <div class="btn-group btn-group-vertical">
                                                    <button class="btn"><span class="icon-align-left"></span></button>
                                                    <button class="btn"><span class="icon-align-center"></span></button>
                                                    <button class="btn btn-danger"><span class="icon-remove icon-white"></span></button>
                                                </div>                                                                    
                                                                           
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                
                            </div>
                        </div>
                        
                        <div class="row-fluid">
                            <div class="span12">
                                
                                <div class="block">
                                    <div class="head">
                                        <h2>Button groups</h2>
                                        <div class="side fr">
                                            <div class="btn-group">
                                                <button class="btn btn-primary">Dropdown</button>
                                                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>                                                    
                                            </div>
                                        </div>
                                    </div>
                                    <div class="content np">
                                        <div class="controls-row">
                                            <div class="span3">Bootstrap button plugins:</div>
                                            <div class="span9">
                                                <div class="btn-group">
                                                    <button class="btn">Dropdown</button>
                                                    <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#">Action</a></li>
                                                        <li><a href="#">Another action</a></li>
                                                        <li><a href="#">Something else here</a></li>                                                        
                                                        <li><a href="#">Separated link</a></li>
                                                    </ul>                                                    
                                                </div>
                                                <div class="btn-group dropup">
                                                    <button class="btn">Dropup</button>
                                                    <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#">Action</a></li>
                                                        <li><a href="#">Another action</a></li>
                                                        <li><a href="#">Something else here</a></li>
                                                        <li><a href="#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="controls-row">
                                            <div class="span3">Single toggle:</div>
                                            <div class="span9">                                                                                        
                                                <button type="button" class="btn" data-toggle="button">Press me to toggle</button>
                                            </div>
                                        </div>                                        
                                        <div class="controls-row">
                                            <div class="span3">Button checkbox:</div>
                                            <div class="span9">                                                                                        
                                                <div class="btn-group" data-toggle="buttons-checkbox">
                                                    <button type="button" class="btn">Left</button>
                                                    <button type="button" class="btn">Middle</button>
                                                    <button type="button" class="btn">Right</button>
                                                </div>
                                                <div class="btn-group" data-toggle="buttons-checkbox">
                                                    <button type="button" class="btn"><span class="icon-download"></span></button>
                                                    <button type="button" class="btn"><span class="icon-upload"></span></button>                                    
                                                </div>                                                
                                            </div>
                                        </div>  
                                        <div class="controls-row">
                                            <div class="span3">Button radio:</div>
                                            <div class="span9">
                                                <div class="btn-group" data-toggle="buttons-radio">
                                                    <button type="button" class="btn">Left</button>
                                                    <button type="button" class="btn">Middle</button>
                                                    <button type="button" class="btn">Right</button>
                                                </div>
                                                <div class="btn-group" data-toggle="buttons-radio">
                                                    <button type="button" class="btn"><span class="icon-ok"></span></button>
                                                    <button type="button" class="btn"><span class="icon-remove"></span></button>                                    
                                                </div>                                                                
                                            </div>                                            
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>

                        <div class="row-fluid">
                            <div class="span12">
                                
                                <div class="block">
                                    <div class="head">
                                        <h2>Pagination</h2>
                                        <div class="side fr">
                                            <div class="pagination">
                                                <ul>                                                    
                                                    <li><a href="#" class="active">1</a></li>
                                                    <li><a href="#">2</a></li>
                                                    <li><a href="#">3</a></li>
                                                    <li><a href="#">4</a></li>
                                                    <li><a href="#">5</a></li>                                                    
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="content np">
                                        <div class="controls-row">
                                            <div class="span3">Default pagination:</div>
                                            <div class="span9">
                                                <div class="pagination">
                                                    <ul>
                                                        <li class="disabled"><a href="#">«</a></li>
                                                        <li class="active"><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">4</a></li>
                                                        <li><a href="#">5</a></li>
                                                        <li><a href="#">»</a></li>
                                                    </ul>
                                                </div>                                                                                                
                                            </div>                                            
                                        </div>
                                        <div class="controls-row">
                                            <div class="span3">Sizes:</div>
                                            <div class="span9">

                                                <div class="pagination">
                                                    <ul>
                                                        <li><a href="#">«</a></li>
                                                        <li><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">4</a></li>
                                                        <li><a href="#">5</a></li>
                                                        <li><a href="#">»</a></li>
                                                    </ul>
                                                </div>
                                                <div class="pagination pagination-small">
                                                    <ul>
                                                        <li><a href="#">«</a></li>
                                                        <li><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">4</a></li>
                                                        <li><a href="#">5</a></li>
                                                        <li><a href="#">»</a></li>
                                                    </ul>
                                                </div>
                                                <div class="pagination pagination-mini">
                                                    <ul>
                                                        <li><a href="#">«</a></li>
                                                        <li><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">4</a></li>
                                                        <li><a href="#">5</a></li>
                                                        <li><a href="#">»</a></li>
                                                    </ul>
                                                </div>
                                                                                                                                          
                                            </div>                                            
                                        </div>                                        
                                    </div>
                                    <div class="footer">
                                        <div class="side fl">
                                            <div class="pagination">
                                                <ul>                                                    
                                                    <li><a href="#" class="disabled">«</a></li>
                                                    <li><a href="#" class="active">1</a></li>
                                                    <li><a href="#">2</a></li>
                                                    <li><a href="#">3</a></li>
                                                    <li><a href="#">»</a></li>                                                    
                                                </ul>
                                            </div>
                                        </div>                                        
                                        <div class="side fr">
                                            <div class="pagination">
                                                <ul>                                                    
                                                    <li><a href="#" class="disabled">«</a></li>
                                                    <li><a href="#" class="active">1</a></li>
                                                    <li><a href="#">2</a></li>
                                                    <li><a href="#">3</a></li>
                                                    <li><a href="#">»</a></li>                                                    
                                                </ul>
                                            </div>
                                        </div>                                        
                                    </div>
                                </div>
                                
                            </div>
                        </div>                                                                       
                        
                    </div>                    
                    
                </div>
                
            </div>
            
        </div>

    </div>

    
</body>
</html>
